<!--
 * @Author: ykp 501436989@qq.com
 * @Date: 2025-03-20 15:24:34
 * @LastEditors: ykp 501436989@qq.com
 * @LastEditTime: 2025-08-26 12:43:09
 * @FilePath: \vue-ts\src\views\todolist\components\card.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="w-[260px] ml-[6px] my-2 min-h-80 rounded-md  text-gray-800 border bg-white cursor-pointer hover:border-blue-500 border-gray-300"
    @click="goDetails(card.id)">
    <div class="h-6 my-1 text-[18px] text-center font-bold text-red-500 pl-2 leading-6">
      {{ card.title }}
    </div>
    <div class="h-6 my-1 text-4 text-left pl-2 leading-6">
      任务类型：<cards-type :crdType="card.type"></cards-type>
    </div>
    <div class="h-6 my-1 text-4 text-left pl-2 leading-6">
      开始时间：{{ card.starTime }}
    </div>
    <div class="h-6 my-1 text-4 text-left pl-2 leading-6">
      预计完成时间：{{ card.time }}
    </div>
    <div class="h-6 my-1 text-4 text-left pl-2 leading-6">
      预估人天：{{ card.manDay }}
    </div>
    <div class="h-6 my-1 text-4 text-left pl-2 leading-6">
      任务执行人：{{ card.executor }}
    </div>
    <div class="h-6 my-1 text-4 text-left pl-2 leading-6">
      重要紧急程度：<tasklabel :crdType="card.importance"></tasklabel>
    </div>
    <div class="min-h-6 my-1 text-4 text-left pl-2 leading-6">
      任务情况总结：
      <div class="break-words break-all w-[calc(100%-8px)] first-line: [text-indent:2em]">
        {{ card.summary }}
      </div>
    </div>
    <div class="my-1 text-4 text-left px-2 leading-6">
      进度:{{ card.progress }}%
      <el-slider class="slider" disabled v-model="card.progress" />
    </div>
  </div>
  <fromitem v-model="showAdd" :item='itemDetails' :isAbb="isAbb">

  </fromitem>
</template>

<script setup lang="ts">
import { nextTick, ref } from "vue";
import type { cardType } from "@/type/todolist/card"; //引入ts类型定义
import { ElSlider } from "element-plus"; //引入el-slider组件
import CardsType from "./cardType.vue";
// 假设 tasklabel.vue 导出的默认组件，修改导入方式为默认导入
import tasklabel from "./tasklabel.vue";
import { queryDetails, querylist } from "../js/indexeddbOperations";
import fromitem from './fromitem.vue'
const props = defineProps({
  cardItem: {
    type: Object,
    default: (): cardType => {
      return {
        title: '',
        type: '',
        time: '',
        manDay: '',
        executor: '',
        importance: '',
        starTime: '',
        summary: '',
        progress: 0,
        id: '',
        packetType: '',
      };
    }, //任务类型下标
  },
});
let card = ref<cardType>({
  title: null,
  type: null,
  time: null,
  manDay: null,
  executor: null,
  importance: null,
  starTime: null,
  summary: null,
  progress: null,
  id: null,
  packetType: null,
});
card.value = props.cardItem as cardType;
const isAbb = ref(false)
const showAdd = ref(false)
const itemDetails = ref<cardType>({
  title: null,
  type: null,
  time: null,
  manDay: null,
  executor: null,
  importance: null,
  starTime: null,
  summary: null,
  progress: null,
  id: null,
  packetType: null,
})
const goDetails = function (id: string) {
  queryDetails(id).then((res: any) => {

    itemDetails.value = res as cardType
    console.log(itemDetails.value)
    nextTick(()=>{showAdd.value = true})
    

  });
};
</script>

<style scoped>
.slider {
  width: 80%;
  margin-left: 10%;
  margin: 0 10%;
  margin-top: 5px;
  margin-bottom: 5px;
}

:deep(.el-slider__button) {
  width: 10px;
  height: 10px;
  background-color: #409eff;
  border-radius: 50%;
  border: 1px solid #409eff;
}
</style>